<template>
	<div class="bg-light vh-100">
		<nav class="text-center font-weight-bold bg-white py-3">
			购物车
		</nav>
		<div class="d-flex justify-content-between px-3 align-items-center my-2">
			<span>
				共<span style="color:#f45500;">{{ getTotalNum }}</span>件商品
			</span>
			<span @click="isEdit = !isEdit">
				<span v-if="!isEdit" >
					<van-icon name="edit" />编辑
				</span>
				<span v-else style="color:#f45500;">
					完成
				</span>
			</span>
		</div>

		<cartGoods v-for="item in cartList" :key="item.goods_id" :data="item"></cartGoods>

		<template v-if="!isEdit">
			<van-submit-bar :price="getPrice * 100"  :disabled="getNum.length === 0 ? true : false" safe-area-inset-bottom style="margin-bottom: 70px;"  :button-text="getNum.length === 0 ? '请选择商品' : `去结算(${getNum.length})`">
				<van-checkbox checked-color="#ee0a24" @click="toggleAll(isAll)" :value="isAll">全选</van-checkbox>
			</van-submit-bar>
		</template>
		<template v-else>
			<van-submit-bar @submit="delGoods" :price="getPrice * 100"  :disabled="getNum.length === 0 ? true : false" safe-area-inset-bottom style="margin-bottom: 70px;"  :button-text="'删除'">
				<van-checkbox checked-color="#ee0a24" @click="toggleAll(isAll)" :value="isAll">全选</van-checkbox>
			</van-submit-bar>
		</template>
	</div>
</template>

<script>
import cartGoods from '@/components/cartGoods.vue'
import { mapState,mapGetters, mapMutations, mapActions } from 'vuex';
	export default{
		name:'AppCart',
		async created() {
			await this.$store.dispatch('cart/getCartList')
		},
		computed:{
			...mapState('cart',['cartList']),
			...mapGetters('cart',['getTotalNum','getNum','getPrice','isAll'])
		},
		components:{
			cartGoods
		},
		methods:{
			...mapMutations('cart',['toggleAll']),
			...mapActions('cart',['delGoods'])
		},
		data() {
			return {
				isEdit:false
			}
		}
	}
</script>

<style scoped lang="less">
</style>